<template>
	<view class="jiazhuang" style="overflow: hidden auto;">
		<view class="cu-bar search bg-white">
			<view class="searchBox">
				<view class="search_input">
					<graceSearch :disabled="true" background="#F1F1F1" placeholder="请输入搜索内容" @click.native="$common.routerTo('../components/search/searchPage')"></graceSearch>
				</view>
				<view class="buy_car_box demo-face grace-relative grace-img-in" @click="$common.routerTo('../components/order/buyCar')">
					<image class="buyCar" src="../../static/icon/jiazhuang/buyCar.png" mode="widthFix"></image>
					<view class="grace-badge grace-bg-red grace-badge-absolute">12</view>
				</view>
			</view>
		</view>
		<view class="hot_search" v-if="params.pageInfo.hot_search.length>0">
			<text class="title">热搜</text>
			<view class="tag">
				<text v-for="item in params.pageInfo.hot_search" @click="$common.routerTo('../components/search/searchPage?keyword='+item)">{{item}}</text>
			</view>
		</view>
		<view class="container">
			<view class="card-menu_list" v-if="params.pageInfo.Hot_style_zone.length > 0">
				<view class="grace-title ml10 mr10">
					<text class="grace-title-text grace-black">爆款推荐</text>
					<navigator url="../components/order/orderCenter" class="grace-text-small grace-gray">更多推荐<text class="grace-icons icon-arrow-right"></text></navigator>
				</view>
				<view class="content">
					<view class="Hot_style_zone">
						<view class="left" @click="$common.routerTo('../components/order/goodsDetail')">
							<view class="title">{{params.pageInfo.Hot_style_zone[0].title}}</view>
							<view class="price">￥{{params.pageInfo.Hot_style_zone[0].price}}</view>
							<image class="img" :src="params.pageInfo.Hot_style_zone[0].img" mode="aspectFit"></image>
						</view>
						<view class="right">
							<view class="goods" v-if="params.pageInfo.Hot_style_zone.length >= 2"  @click="$common.routerTo('../components/order/goodsDetail')">
								<view class="msg">
									<view class="title">{{params.pageInfo.Hot_style_zone[1].title}}</view>
									<view class="price">￥{{params.pageInfo.Hot_style_zone[1].price}}</view>
								</view>
								<view>
									<image class="img" :src="params.pageInfo.Hot_style_zone[1].img" mode="aspectFit"></image>
								</view>
							</view>
							<view class="goods mt20" v-if="params.pageInfo.Hot_style_zone.length >= 3"  @click="$common.routerTo('../components/order/goodsDetail')">
								<view class="msg">
									<view class="title">{{params.pageInfo.Hot_style_zone[2].title}}</view>
									<view class="price">￥{{params.pageInfo.Hot_style_zone[2].price}}</view>
								</view>
								<view>
									<image class="img" :src="params.pageInfo.Hot_style_zone[2].img" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card-menu_list mt10" v-if="params.pageInfo.bargain_goods.length>0">
				<view class="grace-title ml10 mr10">
					<text class="grace-title-text grace-black">特价推荐</text>
					<navigator url="../components/order/orderCenter" class="grace-text-small grace-gray">更多推荐<text class="grace-icons icon-arrow-right"></text></navigator>
				</view>
				<view class="content">
					<view class="bargain_goods">
						<view  @click="$common.routerTo('../components/order/goodsDetail?id='+params.pageInfo.bargain_goods[0].id)">
							<image class="img" :src="params.pageInfo.bargain_goods[0].img"></image>
							<view class="price">￥{{params.pageInfo.bargain_goods[0].price}}起</view>
							<view class="title">{{params.pageInfo.bargain_goods[0].title}}</view>
						</view>
						<view v-if="params.pageInfo.bargain_goods.length>=2"  @click="$common.routerTo('../components/order/goodsDetail?id='+params.pageInfo.bargain_goods[1].id)">
							<image class="img" :src="params.pageInfo.bargain_goods[1].img"></image>
							<view class="price">￥{{params.pageInfo.bargain_goods[1].price}}起</view>
							<view class="title">{{params.pageInfo.bargain_goods[1].title}}</view>
						</view>
					</view>

				</view>

			</view>

			<view class="card-menu_list mt10" v-if="params.pageInfo.guess_you_like.length>0">
				<view class="grace-title ml10 mr10">
					<text class="grace-title-text grace-black">猜你喜欢</text>
					<!-- <navigator url="../components/order/orderCenter" class="grace-text-small grace-gray"><text class="grace-icons icon-arrow-right"></text></navigator> -->
				</view>
				<view class="content">
					<view class="guess_you_like">
						<view>
							<image class="img" :src="params.pageInfo.guess_you_like[0].img"></image>
							<view class="title">{{params.pageInfo.guess_you_like[0].title}}</view>
						</view>
						<view v-if="params.pageInfo.guess_you_like.length>=2">
							<image class="img" :src="params.pageInfo.guess_you_like[1].img"></image>
							<view class="title">{{params.pageInfo.guess_you_like[1].title}}</view>
						</view>
					</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceSearch from "../../graceUI/components/graceSearch.vue";
	export default {
		data() {
			return {
				params: {
					pageInfo: {
						hot_search: ['古典风灯具', '现代风灯具', '抽水马桶'],
						Hot_style_zone: [{
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						}, {
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						}, {
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						}],
						bargain_goods: [{
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						}, {
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						}],
						guess_you_like: [{
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						},{
							id: 112,
							title: "超级爆款的抽水马桶，可以直接抽水喝的抽水码头不耐烦智能防盗门",
							price: "123",
							img: ""
						}]

					}
				}
			}
		},
		components: {
			graceSearch,
			graceFlex
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style lang="less" scoped>
	.jiazhuang {
		background: #f1f1f1;

		.searchBox {
			padding: 20upx;
			background-color: #fff;
			display: flex;
			.search_input{
				width: 84vw;
			}
			.buy_car_box{
				flex: 1;
				.buyCar {
					width: 52upx;
					margin-left: 30rpx;
				}
			}
			

			.grace-badge {
				height: auto;
				right: -12upx;
				top: -5upx;
				line-height: 11px;
				padding: 0 6upx;
				font-size: 8px;
			}
		}




		.hot_search {
			display: flex;
			background-color: #fff;
			padding: 0 0 27upx 30upx;
			justify-content: space-between;
			margin-bottom: 20upx;

			.title {
				width: 100upx;
				text-align: center;
				font-size: 24upx;
				font-weight: bold;
				line-height: 48upx;
				color: rgba(0, 0, 0, 1);
			}

			.tag {
				flex: 1;

				text {
					display: inline-block;
					padding: 0 20upx;
					margin: 0 20upx 0 0;
					line-height: 48upx;
					background-color: rgba(241, 241, 241, 1);
					border-radius: 24upx;

					font-size: 18upx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0px;
					color: rgba(96, 96, 96, 1);
				}
			}
		}

		.container {
			margin: 10upx 0 40upx;
			background: #fff;

			.content {
				.Hot_style_zone {
					margin: 0 4vw;
					display: flex;

					.left {
						background: #f1f1f1;
						width: 45vw;
						height: 337upx;
						margin-right: 2vw;
						border-radius: 12px;
						text-align: center;
						padding: 38upx 0 25upx;

						.title {
							display: inline-block;
							font-size: 30upx;
							line-height: 50upx;
							color: #000000;
							opacity: 0.9;
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.price {
							font-size: 30upx;
							// font-weight: bold;
							font-stretch: normal;
							line-height: 50upx;
							letter-spacing: -1px;
							color: #ff0b0b;
							margin-bottom: 13upx;
						}

						.img {
							height: 198upx;
							max-width: 100%;
							// width: auto;
						}
					}

					.right {
						margin-left: 2vw;
						width: 45vw;
						height: 337upx;

						.goods {
							min-height: 175upx;
							background: #f1f1f1;
							display: flex;
							padding: 25upx 36upx;
							text-align: center;
							box-sizing: border-box;
							border-radius: 12upx;

							.msg {
								margin-right: 45upx;
								text-align: right;
								padding-top: 10upx;

								.title {
									display: inline-block;
									font-size: 30upx;
									line-height: 50upx;
									color: #000000;
									opacity: 0.9;
									width: 120upx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.price {
									font-size: 30upx;
									// font-weight: bold;
									font-stretch: normal;
									line-height: 30upx;
									letter-spacing: -1px;
									color: #ff0b0b;
								}

							}

							.img {
								height: 110upx;
								max-width: 83upx;
								// width: auto;
							}

						}
					}
				}

				.bargain_goods {
					margin: 0 4vw;
					display: flex;
					justify-content: space-between;

					&>view {
						width: 44vw;
						background: #f1f1f1;
						height: 350upx;
						border-radius: 12px;

						.img {
							border-radius: 12px 12px 0 0;
							width: 44vw;
							height: 243upx;
						}

						.price {
							padding: 0 20upx;
							font-size: 34upx;
							// font-weight: bold;
							font-stretch: normal;
							line-height: 50upx;
							letter-spacing: -1px;
							color: #ff0b0b;
						}

						.title {
							padding: 0 20upx;
							font-size: 24upx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 30upx;
							letter-spacing: -1px;
							color: #606060;
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.guess_you_like {
					margin: 0 4vw;
					display: flex;
					justify-content: space-between;

					&>view {
						width: 44vw;
						// background: #f1f1f1;

						// height: 350upx;
						// border-radius: 12px;
						.img {
							border-radius: 12px;
							width: 44vw;
							height: 200upx;
						}
						.title {
							padding: 0 20upx;
							font-size: 24upx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 30upx;
							letter-spacing: -1px;
							color: #606060;
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}



			}

			// .card-menu_list {
			// 	.fw {
			// 		font-weight: 600;
			// 	}

			// 	.box_contant {
			// 		display: inline-block;
			// 		width: calc(50vw-50px);
			// 		height: 361upx;
			// 		background: #FF9700;
			// 	}
			// }
		}

	}
</style>
